<template>
<div>
    <div style="margin:0 auto;height:800px;padding:50px 50px 100px;overflow:scroll;">
        <el-form label-position="left" :model="storeDataForm" ref="storeDataForm">
        <el-form-item label="是否开启线上课程推荐功能：" :label-width="formLabelWidth" prop="name">
            <el-switch
                v-model="storeDataForm.open_recommend"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#dbdbdb">
            </el-switch>
        </el-form-item>
        <el-form-item>
            <span style="margin-left:20px">开启线上课程推荐功能后，店铺在收款码界面将可以看到课程</span>
        </el-form-item>

        <el-form-item label="店铺新用户付款成功奖励设定：" :label-width="formLabelWidth" prop="customer_id">
            <el-switch
                v-model="storeDataForm.open_reward_new_user"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#dbdbdb">
            </el-switch>
        </el-form-item>
        <el-form-item>
            <span style="display:block"></span>
            <span style="display:block">家长付款金额大于：<el-input style="width:100px;" v-model="storeDataForm.reward_new_user_pay_min" :disabled="storeDataForm.open_reward_new_user===1?false:true"></el-input></span>
            <span>奖励金额：<el-input style="width:100px;" v-model="storeDataForm.reward_new_user_money" :disabled="storeDataForm.is_newuser_reward===1?false:true"></el-input></span>
        </el-form-item>
        <el-form-item>
            <span style="margin-left:20px">开启店铺新人奖励后，必须满足2个条件，新授权用户，且家长付款金额大于{{storeDataForm.reward_new_user_pay_min}}元，将获取新人付款成功奖励</span>
        </el-form-item>

        <el-form-item label="会员等级名称:" :label-width="formLabelWidth">
            <div>
                <div v-if="storeDataForm.vipname">
                    <el-input style="width:100px;" v-model="storeDataForm.vipname"></el-input>
                    <span style="margin-left:10px;">可绑定的团队数量：</span>
                    <el-input style="width:100px;" v-model="storeDataForm.user_level"></el-input>
                </div>
                <span v-else>无</span>
            </div>
            <span style="margin-left:-200px">会员等级名称，在手机端-我的-页面展示</span>
        </el-form-item>
        <!-- <el-form-item>
            <span style="margin-left:20px">会员等级名称，在手机端-我的-页面展示</span>
        </el-form-item> -->

        <el-form-item label="公司员工:" :label-width="formLabelWidth" prop="contact">
            <el-input style="width:100px;" v-model="storeDataForm.company_staff_name"></el-input>
            <el-dialog title="" :visible.sync="innerVisible" append-to-body>
                <el-form :model="storeDataForm">
                    <el-form-item label="店铺搜索：" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="searchkey" placeholder="请输入团队名称/电话/联系人" style="width:300px" @change="search"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-row>
                            <el-col :span="8" v-for="(o, index) in allteams" :key="o" :offset="index > 0 ? 0 : 0" style="margin-right:30px;margin-top:10px">
                                <el-radio v-model="addteams" :label="index">
                                <el-card :body-style="{ padding: '20px' }">
                                        <div style="height:95px">
                                            <span class="card"><img :src="allteams[index].url" class="image"></span>
                                            <span class="add_card_text">
                                                <p>{{allteams[index].username}}</p>
                                                <p>{{allteams[index].phone}}</p>
                                                <p>{{allteams[index].teacher}}</p>
                                            </span>
                                        </div>
                                </el-card>
                                </el-radio>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addcancelSubmit">取 消</el-button>
                    <el-button type="primary" @click="addsubmit()">确 定</el-button>
                </div>
            </el-dialog>
            <el-button type="primary" :disabled="storeDataForm.teams.length<storeDataForm.teams_Number?false:true" @click="add()">绑定团队</el-button>
        </el-form-item>

        <el-form-item label="已经绑定下级团队列表：" :label-width="formLabelWidth">
            <span style="color:#00F5FF;">{{storeDataForm.teams.length}}</span><span style="margin-left:20px">个</span>
        </el-form-item>
        <el-form-item>
            <el-row>
                <el-col :span="8" v-for="(o, index) in storeDataForm.teams" :key="o" :offset="index > 0 ? 0 : 0" style="margin-right:30px;margin-top:10px">
                    <el-card :body-style="{ padding: '20px'}">
                    <div style="height:95px">
                        <span class="card"><img :src="storeDataForm.teams[index].url" class="image"></span>
                        <span class="card_text">{{storeDataForm.teams[index].username}}</span>
                        <el-popover
                            placement="top"
                            width="160"
                            v-model="storeDataForm.teams[index].visible">
                            <p>你确定要删除该绑定团队吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="storeDataForm.teams[index].visible = false">取消</el-button>
                                <el-button type="primary" size="mini" @click="del(index)">确定</el-button>
                            </div>
                            <el-button type="text" class="button" slot="reference" @click="showdel(index)">删除</el-button>
                        </el-popover>
                    </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" style="position: relative; left: 90px">
            <el-button @click="cancelSubmit">取 消</el-button>
            <el-button type="primary" @click="submitStore('storeDataForm')">确 定</el-button>
        </div>
    </div>
</div>
</template>
<script>
    export default {
        name:'part3',
        data(){
            return{
                innerVisible:false,
                searchkey:'',
                addteams:'0',
                storeDataForm:{

                },
                allteams:[
                        {
                            url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                            username:'sdawdws',
                            visible:false,
                            teacher:'ssss',
                            phone:"123456789"
                        },
                        {
                            url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                            username:'a',
                            visible:false,
                            teacher:'ssss',
                            phone:"123456789"
                        },
                        {
                            url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                            username:'tbc',
                            visible:false,
                            teacher:'ssss',
                            phone:"123456789"
                        },
                        {
                            url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                            username:'tbc',
                            visible:false,
                            teacher:'ssss',
                            phone:"123456789"
                        },
                        {
                            url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                            username:'tbc',
                            visible:false,
                            teacher:'ssss',
                            phone:"123456789"
                        },
                        
                        {
                            url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                            username:'tbc',
                            visible:false,
                            teacher:'ssss',
                            phone:"123456789"
                        }
                ],
                currentDate: new Date(),
                formLabelWidth: '220px',
            }
        },
        methods: {
            search(){

            },
            addcancelSubmit(){
                this.$message.success('取消添加')
                this.innerVisible=!this.innerVisible
            },
            addsubmit(){
                // console.log(this.addteams,index)
                this.$message.success('添加成功')
                console.log(this.allteams[Number(this.addteams)])
                this.storeDataForm.teams.push(this.allteams[Number(this.addteams)])
                this.innerVisible=!this.innerVisible
                // this.storeDataForm.teams.push(this.allteams[Number(index)])
            },
            showDetailDialog(row){
                console.log("part3",row);
                this.storeDataForm={}
                this.storeDataForm=row
                console.log(this.storeDataForm)
            },
            showdel(index){
                this.storeDataForm.teams[index].visible=true
            },
            del(index){
                this.storeDataForm.teams.splice(index,1)
            },
            add(){
                this.innerVisible=!this.innerVisible;
                // this.storeDataForm.teams.push({url:this.storeDataForm.teams[0].url,username:this.storeDataForm.employeename})
            },
            cancelSubmit(){
                this.$message.success('取消提交')
                this.showDetailStoreDialog = !this.showDetailStoreDialog
            },
        }
    }
</script>
<style>
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    margin-top: -60px;
    float: right;
  }

  .image {
    width: 100%;
    border-radius: 100%;
  }

  .clearfix:before,
  .clearfix:after {
      content: "";
  }
  
  .clearfix:after {
      
  }
  .card{
      height: 93px;
      width: 80px;
      display:inline-block;
      float: left;
  }
  .card_text{
      margin-left: 20px;
      margin-top: 20px;
      height: 93px;
      width: 80px;
      display:inline-block;
      float: left;
  }
  .add_card_text{
      margin-left: 20px;
      height: 93px;
      width: 80px;
      display:inline-block;
      float: left;
  }
</style>